<template>
  <div class="home">
    <h1>这是home页面</h1>
    <div style="color: #f00; padding: 0 20px">
      <p>注意: 此模板引用了rem单位转换</p>
      <p>如开发pc项目建议:</p>
      <ul>
        <li>1. 移除postcss-pxtorem插件 npm uninstall postcss-pxtorem</li>
        <li>2. 删除/postcss.config.js配置文件</li>
        <li>3. 删除/main.js中的import "@/common/rem";</li>
        <li>4. 删除/src/common/rem.js</li>
      </ul>
    </div>
    <p style="color: #f00; padding: 0 20px">如开发后台管理项目不建议使用本模板！！！</p>
    <hr />
    <p>home页面调用的组件:</p>
    <Cpn />
    <hr />
    <p>二级路由:</p>
    <div class="home-nav">
      <router-link to="/home/home1">home1</router-link>
      <span>丨</span>
      <router-link to="/home/home2">home2</router-link>
      <span>丨</span>
      <router-link to="/home/home3">home3</router-link>
    </div>
    <!-- keep-alive 看自己情况使用 -->
    <!-- <keep-alive></keep-alive> -->
    <router-view />
    <hr />
    <p>{{ appTitle }}</p>
  </div>
</template>

<script>
// @ 所指的目录 /src
import Cpn from '@/components/cpn/Cpn.vue'
import { formatDate } from 'roc-utils/dist/roc-utils.es.js'

export default {
  name: 'Home',
  data() {
    return {
      appTitle: process.env.VUE_APP_TITLE,
    }
  },
  components: {
    Cpn,
  },
  created() {
    console.log(formatDate(new Date()))
  },
}
</script>

<style lang="scss" scoped>
.home {
  h1 {
    font-size: 18px;
  }
  .home-nav {
    a {
      font-weight: bold;
      color: #2c3e50;
      &.router-link-active {
        color: #ff9999;
      }
    }
  }
}
</style>
